let box = document.getElementById('menu');
let select = document.querySelector('h1 span');
let btn = document.querySelector('.select');
let add = document.querySelector('.add');
let del = document.querySelector('.del');
let list = JSON.parse(localStorage.getItem('List')) || [];

window.onload = function () {
    //首次进入页面时，获取本地存的值进行渲染
    for (let i = 0; i < list.length; i++) {
        let span = document.createElement('span');
        span.innerText = list[i];
        box.appendChild(span);
    }

    //新增菜单
    add.addEventListener('click', function () {
        let menu = document.querySelectorAll('#menu span');
        if (menu.length > 0) {
            menu.forEach((item) => {
                item.classList.remove('hover');
            });
        }
        let val = prompt('请输入菜名：') || '';
        if (val.trim() != '') {
            list.push(val);
            let span = document.createElement('span');
            span.innerHTML = val;
            box.appendChild(span);
        }
    });

    //随机选择
    btn.addEventListener('click', function () {
        let menu = document.querySelectorAll('#menu span');
        if (list.length < 2) {
            alert('菜单数量必须大于1个才能随机选择哦！');
            return;
        }
        select.innerText = '';
        let index;
        let time = setInterval(function () {
            menu.forEach((item) => {
                item.style.color = 'black';
                item.style.backgroundColor = '#cc6ddf';
                item.style.border = 'none';
                item.classList.remove('hover');
            });
            index = parseInt(Math.random() * list.length);
            menu[index].style.color = 'red';
            menu[index].style.backgroundColor = '#ffeead';
            menu[index].style.border = '1px solid #FFF000';
        }, 100);
        setTimeout(() => {
            select.innerText = menu[index].innerText;
            clearInterval(time);
        }, 1500);
    });

    //删除时菜单元素浮动效果
    del.addEventListener('click', function () {
        let menu = document.querySelectorAll('#menu span');
        if (menu.length > 0) {
            menu.forEach((item) => {
                item.classList.add('hover');
            });
        }
    });

    //删除菜单元素
    box.addEventListener('click', function (e) {
        if (e.target.className == 'hover') {
            let delList = e.target.innerText;
            box.removeChild(e.target);
            list.forEach((item, index) => {
                if (item == delList) {
                    list.splice(index, 1);
                }
            });
        }
    });

    //如果删除时点击其他地方，会取消菜单元素浮动效果
    document.addEventListener('click', function (e) {
        let isBox = box.contains(e.target);
        if (!isBox && e.target.className !== 'del') {
            let menu = document.querySelectorAll('#menu span');
            menu.forEach((item) => {
                item.classList.remove('hover');
            });
        }
    });
};

//离开页面时进行缓存
window.onbeforeunload = function () {
    localStorage.setItem('List', JSON.stringify(list));
};